<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 400px;
            height: 200px;
            background-color: red;
            margin-top: 20px;
        }
    </style>
    <script>
    </script>
</head>

<body>
    <div id=123>第一</div>
    <script>
        x = document.getElementById("123");
        //查找id为123的元素
    </script>




    <div class="abc">第二</div>
    <script>
        y = document.getElementsByClassName("abc");
        // 查找类名为abc的元素
    </script>



    <div>第三</div>
    <script>
        z = document.getElementsByTagName("div");
        // 查找标签名为div的元素
    </script>




    <script>
        document.write("嘤嘤嘤");
        // 向文档流中写入嘤嘤嘤
    </script>




    <p id="p1">第五</p>
    <script>
        document.getElementById("p1").innerHTML = "改变元素内容";
        // 使用innerHTML改变对应标签中元素内容
    </script>





    <img id="456" src="../media_resourcing/c.jg" alt="QAQ">
    <script>
        document.getElementById("456").alt = "aaaaaa";
        //document.getElementById("id").attribute="new"
        // 设置对应元素的新属性.
    </script>
</body>

</html>